<template>
    <section>
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="filters">
                <el-form-item>
                    <el-input v-model="filters.name" placeholder="名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="getEmployee">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="clearSearch">重置查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleAdd">新增</el-button>
                </el-form-item>
            </el-form>
        </el-col>

        <!--列表-->
        <el-table :data="employee" highlight-current-row v-loading="listLoading" @selection-change="selsChange"
                  style="width: 100%;">
            <el-table-column type="selection" width="30">
            </el-table-column>
            <el-table-column type="index" width="60">
            </el-table-column>
            <el-table-column prop="logoUrl" label="头像" width="120">
                <!--<img src="http://localhost:80/image/getImage/"+logoUrl>-->
            </el-table-column>
            <el-table-column prop="username" label="员工名称" width="100" sortable>
            </el-table-column>
            <el-table-column prop="password" label="员工密码" width="120" sortable>
            </el-table-column>
            <el-table-column prop="employeeNumber" label="员工工号" width="100" sortable>
            </el-table-column>
            <el-table-column prop="realName" label="真实姓名" width="100" sortable>
            </el-table-column>
            <el-table-column prop="tel" label="电话" width="80" sortable>
            </el-table-column>
            <el-table-column prop="email" label="邮箱" width="120" sortable>
            </el-table-column>
            <el-table-column prop="dept.name" label="所属部门" width="100" sortable>
            </el-table-column>
            <el-table-column prop="role.name" label="角色" width="100" sortable>
            </el-table-column>
            <el-table-column prop="state" label="状态" width="90" :formatter="formatState">
            </el-table-column>
            <el-table-column label="操作" width="150">
                <template scope="scope">
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--分页-->
        <el-col :span="24" class="toolbar">
            <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="pageSize"
                           :total="total" style="float:right;">
            </el-pagination>
        </el-col>

        <!--&lt;!&ndash;编辑界面&ndash;&gt;-->
        <!--<el-dialog title="编辑" :visible.sync="editFormVisible" :close-on-click-modal="false">-->
            <!--<el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">-->
                <!--<el-form-item label="员工编号" prop="sn">-->
                    <!--<el-input v-model="editForm.sn" auto-complete="off"></el-input>-->
                <!--</el-form-item>-->
                <!--<el-form-item label="员工名" prop="name">-->
                    <!--<el-input v-model="editForm.name" auto-complete="off"></el-input>-->
                <!--</el-form-item>-->
                <!--<el-form-item label="员工经理" prop="manager">-->
                    <!--<el-select v-model="editForm.manager.id" placeholder="请选择员工经理"-->
                               <!--style="width:100%">-->
                        <!--<el-option v-for="item in employeeSelect" :key="item.id"-->
                                   <!--:label="item.realName+'  工号:'+item.employeeNumber"-->
                                   <!--:value="item.id"></el-option>-->
                    <!--</el-select>-->
                <!--</el-form-item>-->
                <!--<el-form-item label="上级员工" prop="parent">-->
                    <!--<el-select v-model="editForm.parent.id" placeholder="请选择上级员工"-->
                               <!--style="width:100%">-->
                        <!--<el-option v-for="item in departmentSelect" :key="item.id" :label="item.name"-->
                                   <!--:value="item.id" width="500px"></el-option>-->
                    <!--</el-select>-->
                <!--</el-form-item>-->
                <!--<el-form-item label="员工状态" prop="state">-->
                    <!--<el-select v-model="editForm.state" placeholder="请选择状态"-->
                               <!--style="width:100%">-->
                        <!--<el-option v-for="item in stateSelect" :key="item.state" :label="item.state?'启用':'禁用'"-->
                                   <!--:value="item.state"></el-option>-->
                    <!--</el-select>-->
                <!--</el-form-item>-->
            <!--</el-form>-->
            <!--<div slot="footer" class="dialog-footer">-->
                <!--<el-button @click.native="editFormVisible = false">取消</el-button>-->
                <!--<el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>-->
            <!--</div>-->
        <!--</el-dialog>-->

        <!--&lt;!&ndash;新增界面&ndash;&gt;-->
        <!--<el-dialog title="新增" :visible.sync="addFormVisible" :close-on-click-modal="false">-->
            <!--<el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">-->
                <!--<el-form-item label="员工名" prop="name">-->
                    <!--<el-input v-model="addForm.name" auto-complete="off"></el-input>-->
                <!--</el-form-item>-->
                <!--<el-form-item label="员工sn" prop="sn">-->
                    <!--<el-input v-model="addForm.sn" auto-complete="off"></el-input>-->
                <!--</el-form-item>-->
                <!--<el-form-item label="员工经理" prop="manager">-->
                    <!--<el-select v-model="addForm.manager.id" placeholder="请选择员工经理"-->
                               <!--style="width:100%">-->
                        <!--<el-option v-for="item in employeeSelect" :key="item.id"-->
                                   <!--:label="item.realName+'  工号:'+item.employeeNumber"-->
                                   <!--:value="item.id"></el-option>-->
                    <!--</el-select>-->
                <!--</el-form-item>-->
                <!--<el-form-item label="上级员工" prop="parent">-->
                    <!--&lt;!&ndash;v-model="addForm.parentId"对应:value="item.id"&ndash;&gt;-->
                    <!--<el-select v-model="addForm.parent.id" placeholder="请选择上级员工"-->
                               <!--style="width:100%">-->
                        <!--<el-option v-for="item in departmentSelect" :key="item.id" :label="item.name"-->
                                   <!--:value="item.id" width="500px"></el-option>-->
                    <!--</el-select>-->
                <!--</el-form-item>-->
                <!--<el-form-item label="员工状态" prop="state">-->
                    <!--<el-select v-model="addForm.state" placeholder="请选择状态"-->
                               <!--style="width:100%">-->
                        <!--<el-option v-for="item in stateSelect" :key="item.state" :label="item.state?'启用':'禁用'"-->
                                   <!--:value="item.state"></el-option>-->
                    <!--</el-select>-->
                <!--</el-form-item>-->
            <!--</el-form>-->
            <!--<div slot="footer" class="dialog-footer">-->
                <!--<el-button @click.native="addFormVisible = false">取消</el-button>-->
                <!--<el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>-->
            <!--</div>-->
        <!--</el-dialog>-->
    </section>
</template>

<script>
    export default {
        data() {
            return {
                user:'',
                filters: {
                    name: ''
                },
                /*员工列表*/
                employee: [],
                /*员工下拉框*/
                departmentSelect: [],
                /*经理下拉框*/
                employeeSelect: [],
                /*员工状态下拉框*/
                stateSelect: [{'state': true}, {'state': false}],
                /*每页条数*/
                pageSize: 5,
                /*当前页*/
                currentPage: 1,
                /*总数*/
                total: 0,
                listLoading: false,
                sels: [],//列表选中列
                editFormVisible: false,//编辑界面是否显示
                editLoading: false,
                editFormRules: {
                    name: [
                        {required: true, message: '请输入名称', trigger: 'blur'}
                    ]
                },
                //编辑表单
                editForm: {
                    id: 0,
                    sn: '',
                    name: '',
                    manager: {
                        id: ''
                    },
                    parent: {
                        id: ''
                    },
                    state: true
                },
                addFormVisible: false,//新增界面是否显示
                addLoading: false,
                addFormRules: {
                    name: [
                        {required: true, message: '请输入姓名', trigger: 'blur'}
                    ],
                    sn: [
                        {required: true, message: '请输入sn', trigger: 'blur'}
                    ]
                },
                //新增表单
                addForm: {
                    name: '',
                    sn: '',
                    manager: {
                        id: ''
                    },
                    parent: {
                        id: ''
                    },
                    tenant: {
                        id:''
                    },
                    state: true,
                }
            }
        },
        methods: {
            // /*经理下拉框数据*/
            // selectManager(tenantId) {
            //     this.$http.get('/employee/list/'+tenantId).then(res => {
            //         this.employeeSelect = res.data;
            //     });
            // },
            // /*员工下拉框数据*/
            // selectDepartment(tenantId) {
            //     this.$http.get('/department/list/'+tenantId).then(res => {
            //         this.departmentSelect = res.data;
            //     });
            // },
            /*员工状态格式转换*/
            formatState: function (row, column) {
                return row.state ? '启用' : '禁用';
            },
            /*重置查询*/
            clearSearch() {
                this.filters.name = "";
                this.getEmployee();
            },
            /*页面跳转*/
            handleCurrentChange(val) {
                //当前页
                this.currentPage = val;
                this.getEmployee();
            },
            //员工列表
            getEmployee() {
                /*请求参数*/
                let params = {
                    /*当前页*/
                    currentPage: this.currentPage,
                    /*每页条数*/
                    pageSize: 5,
                    /*高级查询字段*/
                    name: this.filters.name,
                    /*所属租户id*/
                    tenantId:this.user.tenant.id
                }
                /*显示加载中状态*/
                this.listLoading = true;
                this.$http.patch('/employee/queryPage', params).then((res) => {
                    this.total = res.data.total;
                    this.employee = res.data.rows;
                    this.listLoading = false;
                });
            },
            //删除
            handleDel: function (index, row) {
                // this.$confirm('确认删除该记录吗?', '提示', {
                //     type: 'warning'
                // }).then(() => {
                //     this.listLoading = true;
                //     this.$http.delete('/department/delete/' + row.id).then((res) => {
                //         let {success, msg} = res.data;
                //         this.listLoading = false;
                //         if (success) {
                //             this.$message({
                //                 message: msg,
                //                 type: 'success'
                //             });
                //             this.getEmployee();
                //         } else {
                //             this.$message({
                //                 message: msg,
                //                 type: 'error'
                //             });
                //         }
                //     });
                // }).catch(() => {
                //
                // });
            },
            //打开编辑窗口时处理值
            handleEdit: function (index, row) {
                // /*显示编辑界面*/
                // this.editFormVisible = true;
                // /*如果没有上级员工 避免parent为null*/
                // if (row.parent == null) {
                //     row.parent = {};
                // }
                // /*如果没有员工经理 避免Manager为null*/
                // if (row.manager == null) {
                //     row.manager = {};
                // }
                // /*数据回显*/
                // this.editForm = Object.assign({}, row);
            },
            //打开新增窗口时处理值
            handleAdd: function () {
                // /*显示新增界面*/
                // this.addFormVisible = true;
                // /*清空值*/
                // this.addForm = {
                //     name: '',
                //     sn: '',
                //     manager: {
                //         id: ''
                //     },
                //     parent: {
                //         id: ''
                //     },
                //     tenant: {
                //         id:this.user.tenant.id
                //     },
                //     state:true
                // };
            },
            //编辑方法
            editSubmit: function () {
                // this.$refs.editForm.validate((valid) => {
                //     if (valid) {
                //         this.$confirm('确认提交吗？', '提示', {}).then(() => {
                //             this.editLoading = true;
                //             /*值回显*/
                //             let para = Object.assign({}, this.editForm);
                //             this.$http.post('/department/update', para).then((res) => {
                //                 let {success, msg} = res.data;
                //                 this.editLoading = false;
                //                 if (success) {
                //                     this.$message({
                //                         message: msg,
                //                         type: 'success'
                //                     });
                //                     this.$refs['editForm'].resetFields();
                //                     this.editFormVisible = false;
                //                     this.getEmployee();
                //                 } else {
                //                     this.$message({
                //                         message: msg,
                //                         type: 'error'
                //                     });
                //                 }
                //             });
                //         });
                //     }
                // });
            },
            //新增方法
            addSubmit: function () {
                // this.$refs.addForm.validate((valid) => {
                //     if (valid) {
                //         this.$confirm('确认提交吗？', '提示', {}).then(() => {
                //             /*显示加载效果*/
                //             this.addLoading = true;
                //             /*表单值提取*/
                //             let para = Object.assign({}, this.addForm);
                //             this.$http.put('/department/save', para).then((res) => {
                //                 /*解构*/
                //                 let {success, msg} = res.data;
                //                 this.addLoading = false;
                //                 //判断是否成功
                //                 if (success) {
                //                     this.$message({
                //                         message: msg,
                //                         type: 'success'
                //                     });
                //                     /*清空表单*/
                //                     this.$refs['addForm'].resetFields();
                //                     /*关闭加载效果*/
                //                     this.addFormVisible = false;
                //                     /*刷新数据*/
                //                     this.getEmployee();
                //                 } else {
                //                     this.$message({
                //                         message: msg,
                //                         type: 'error'
                //                     });
                //                 }
                //             });
                //         });
                //     }
                // });
            },
            selsChange: function (sels) {
                this.sels = sels;
            }
        },
        mounted() {
            /*当前登录用户*/
            this.user = JSON.parse(sessionStorage.getItem('user'));
            // /*员工列表*/
            this.getEmployee();
            // /*员工下拉框数据*/
            // this.selectDepartment(this.user.tenant.id);
            // /*经理下拉框数据*/
            // this.selectManager(this.user.tenant.id);
        }
    }

</script>

<style scoped>

</style>